<!-- 
到了某个日期范围，则显示黄条。
简单地说一下功能，如果当前日期在5月10日——5月30日之间，则第一个黄条显示，
如果在5月31日——6月10日之间，则第一个黄条和第二个黄条显示，如果在6月11日之后，则三个黄条都显示。

当然这个功能，简单实现是没问题的，无非就是拿当前日期，与五个值进行比较，
if怎样，else if怎样。但是似乎这样做的结果是需求方一旦要再增加一个黄条，或者再增加几个黄条，那这么多判断累死了
基于对这些时间的顺序，然后计算当前日期是在第几个位置，由第几个位置来推算要出现几个黄条。
当然这样的写法忽略了一种相等的可能性，即当前日期和五个日期中的某个是相同的，那么返回回来的当前日期在数组的位置可能就存在问题了。
不过这个时间设置的是半夜，而且过了一分钟后，也就正常了，所以这个bug，可以忽略不计。
-->

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style type="text/css">
/*reset*/
body {
	margin: 0;
	font: 12px/1.5 '\5b8b\4f53', sans-serif;
	color: #333;
	background: #fff;
}

h1,h2,h3,h4,h5,p,ul,ol,dl,dd {
	margin: 0;
}

button {
	padding: 0;
}

ul,ol {
	padding-left: 0;
	list-style-type: none;
}

a {
	text-decoration: none;
	color: #333;
}

a img {
	border: 0;
}

.clearfix {
	zoom: 1;
}

.clearfix:before,.clearfix:after {
	content: "";
	display: table;
}

.clearfix:after {
	clear: both;
}

.item2 {
	position: relative;
	width: 1000px;
	margin: 0 auto;
}

.times {
	height: 110px;
	margin-top: 20px;
}

.time li.nomg {
	margin-right: 0;
}

.times li {
	width: 160px;
	text-align: center;
	float: left;
}

.mr82 {
	margin-right: 82px;
}

.ml45 {
	margin-left: 45px;
}

.bd {
	float: left;
	text-align: center;
	line-height: 22px;
	font-size: 14px;
}

.fd,.f {
	float: left;
	height: 22px;
	overflow: hidden;
	font-size: 0;
}

.fd {
	background-position: -237px -143px;
	width: 10px;
}

.f {
	background-position: -266px -143px;
	width: 10px;
}

.bd {
	background: #d0fcff;
}

.actline,.acting1,.acting2,.acting3 {
	background:
		url("http://henryzp.com/wp-content/uploads/2012/04/common.png")
		no-repeat;
}

.act {
	font-size: 16px;
	padding-top: 50px;
}

.actline {
	position: absolute;
	width: 763px;
	height: 27px;
	background-position: 0 -100px;
	top: 47px;
	left: 45px;
	padding: 10px 0 0 28px;
}

.acting1,.acting2,.acting3 {
	width: 227px;
	height: 13px;
	background-position: 0 -143px;
	float: left;
	display: none;
	margin-right: 25px;
}
</style>
</head>
<body>
	<div class="item2 clearfix">
		<ul class="times">
			<li class="mr82">
				<div class="box clearfix">
					<div class="fd"></div>
					<div class="bd">5月10日——5月30日</div>
					<div class="f"></div>
				</div>
				<p class="act">活动报名开启</p>
			</li>
			<li class="mr82">
				<div class="box clearfix">
					<div class="fd"></div>
					<div class="bd">5月31日——6月10日</div>
					<div class="f"></div>
				</div>
				<p class="act">投票阶段</p>
			</li>
			<li class="mr82">
				<div class="box clearfix">
					<div class="fd"></div>
					<div class="bd">6月11日——6月13日</div>
					<div class="f"></div>
				</div>
				<p class="act">审核票选结果</p>
			</li>
			<li>
				<div class="box clearfix ml45">
					<div class="fd"></div>
					<div class="bd">6月15日</div>
					<div class="f"></div>
				</div>
				<p class="act">公布比赛结果</p>
			</li>
		</ul>
		<div class="actline clearfix">
			<div class="acting1" id="acting1" name="act"></div>
			<div class="acting2" id="acting2" name="act"></div>
			<div class="acting3" id="acting3" name="act"></div>
		</div>
	</div>
	<script type="text/javascript">
		//时间轴显示 无序
		var t1 = [ "2012-5-10", "2012-5-31", "2012-6-10", "2012-6-11",
				"2012-6-13" ];
		var index = getPos(t1);
		if (index != 0) {
			var num = Math.ceil((index + 1) / 2);
			var ele = document.getElementsByName("act");
			for (var j = 0; j < num; j++) {
				if (num > ele.length) {
					break;
				}
				ele[j].style.display = "block";
			}
		}
		//返回当前日期在数组的位置
		function getPos(arr) {
			var t2 = newTimearr(arr);
			var nowdate = new Date();
			t2.push(nowdate);
			t2.sort(function($1, $2) {
				return $1 - $2;
			});
			for (var i = 0; i < t2.length; i++) {
				if (t2[i] - nowdate == 0) {
					return i;
				}
			}
		}
		function newTimearr(oarry) {
			var arr = [];
			for (var i = 0; i < oarry.length; i++) {
				var s = oarry[i].split(/[^\d+]/);//根据非数字进行分隔
				arr.push(new Date(s[0], s[1] - 1, s[2], 0, 0, 0));
			}
			return arr;
		}
	</script>
</body>
</html>